<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: #d9d2d2;
        }

        .box {
            margin: auto;
            width: 1006px;
            height: 650px;
            overflow: hidden;

        }

        #a {
            display: none;
        }

        .box img {
            width: 200px;
            height: 200px;
        }

        .tou {
            margin: auto;
            width: 992px;
            height: 614px;
            height: 30px;
        }

        .tou li {
            float: right;
            margin-right: 15px;

        }

        .box li {
            position: relative;
            z-index: 1;
            float: left;
            width: 234px;
            margin: 7px;
            background: #fff;
            transition: all .2s linear;
        }

        .box li:hover {
            transform: translateY(-5px);
            box-shadow: 5px 5px 30px #8888;
        }

        li h3 {
            margin: 0 10px 2px;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: 14px;
            font-weight: 400;
            color: #333;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }

        p {
            margin: 0 10px 10px;
            height: 18px;
            font-size: 12px;
            color: #b0b0b0;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .price span {
            margin: 0 10px 10px;
            text-align: center;
            color: #ff6700;
        }
    </style>
</head>

<body>
    <div class="tou">
        <li>扫地机</li>
        <li>空净</li>
        <li>清洁</li>
        <li>风扇</li>
    </div>
    <div class="box">
        <div class="box1" id="a"></div>
        <div class="box2" id="a"></div>
        <div class="box3" id="a"></div>
        <div class="box4" id="a"></div>
    </div>
    <script src="a.js"></script>
    <script>

        var tou = document.querySelectorAll('.tou>li');
        var box = document.querySelector('.box').querySelectorAll('#a');


        for (let j = 0; j < arr.length; j++) {
            var str = '';
            var div = document.querySelector(`.box>.box${j + 1}`);  //获取box1,box2,box3,box4
            for (var i = 0; i < arr[j].data.length; i++) {
                var obj1 = arr[j].data[i];
                str += `<li>
                    <div><img src="${obj1.url}"></img</div>
                    <h3>${obj1.title}</h3>
                    <p>${obj1.desc}</p>
                    <p class="price"><span>${obj1.price}</span>元</P>
                    </li>`;
            }
            div.innerHTML = str;//写入


            box[3].style.display = "block";
            tou[3].style.color = '#ff6700';
            tou[3].style.borderBottom = '2px solid';

            tou[j].onmouseenter = function () {
                for (var k = 0; k < tou.length; k++) {
                    console.log(k);
                    console.log(j);
                    box[k].style.display = 'none';
                    tou[k].style.color = '';
                    tou[k].style.borderBottom = '0px solid';
                }

                box[j].style.display = "block";
                tou[j].style.color = '#ff6700';
                tou[j].style.borderBottom = '2px solid';

            }
        }
    </script>
</body>

</html>